<template>
    <el-skeleton animated :loading="loading">
        <template #template>
            <el-skeleton :rows="4" />
        </template>
        <template #default>
            <div class="course-info" :style="{ backgroundImage: `url(${bgurl})` }">
                <div class="course-name">{{ courseinfo.name }}</div>
                <div class="course-content">
                    <span>课程简介</span>
                    <span>{{ courseinfo.introduce }}</span>
                    <span>开课专业：<span v-for="(item, index) in courseinfo.courseCollegeNames">{{ !index ? "" : "、" }}{{ item
                    }}</span></span>
                </div>
                <div class="course-teacher">
                    <span>开课老师：{{ courseinfo.teacher }}老师</span>
                </div>
            </div>
        </template>
    </el-skeleton>
</template>

<script setup lang="ts">
import { RandomPicture } from "@/utils/randompic";
import { course_getone, get_sourcefile } from "@/api/courseapi";
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";

const route = useRoute();
import { useCourseInfo } from "@store/courseinfo";
import { storeToRefs } from "pinia";

const emit = defineEmits(['stopload'])
const bgurl = ref<string>();
const loading = ref<boolean>(true);
const { courseinfo, sourlist } = storeToRefs(useCourseInfo());

onMounted(async () => {
    bgurl.value = RandomPicture();
    const res1 = await course_getone({ id: route.params.courseid });
    if (res1.code === 200) {
        courseinfo.value = res1.data;
    }
    const res2 = await get_sourcefile({ courseId: courseinfo.value.id, current: 1, size: 100 });
    if (res2.code === 200) {
        sourlist.value = res2.data.records;
    }
    loading.value = false;
    emit("stopload", loading.value);
})
</script>

<style scoped lang="less">
.course-info {
    width: 900px;
    height: 200px;
    margin-top: 10px;
    border: 1px solid #d8dce5;
    border-radius: 10px 10px 0px 0px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 3px 0 #d8dce5;

    .course-name {
        font-size: 30px;
        margin-bottom: 10px;
        margin-left: 20px;
    }

    .course-content {
        margin-left: 20px;
        display: flex;
        flex-direction: column;

        span {
            margin-top: 10px;
            font-weight: 400;
        }
    }

    .course-teacher {
        margin-top: 10px;
        margin-left: 20px;

        span {
            font-size: 15px;
            font-weight: 300;
        }
    }
}
</style>
